// 页面路径：store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex); //vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
	state: { //存放状态
		user: {
			name: 'sanan',
			jifen: 23,
			vip: '普通会员'
		},
		isLogin: false,
		cart: {
			// 商品
			goods: [],
			// 商品数量
			count: 0,
			// 总价
			price: 0
		},
		mockData: {
			goods: [{
					id: '1',
					isAdded: false,
					sort: '奶茶',
					name: '花茶',
					img: 'https://img95.699pic.com/element/40097/9237.png_860.png',
					detair: '茉莉花茶大杯',
					price: '8'
				},
				{
					id: '2',
					isAdded: false,
					sort: '奶茶',
					name: '珍珠奶茶',
					img: 'https://img.ixintu.com/download/jpg/201912/bb6967423d6772425c82c1b9c0a98f0a.jpg!con',
					detair: '珍珠奶茶大杯',
					price: '10'
				},
				{
					id: '3',
					isAdded: false,
					sort: '奶茶',
					name: '爆爆珠奶茶',
					img: 'https://ts1.cn.mm.bing.net/th/id/R-C.c004a9121458ad04740a114ebc0fe3fd?rik=zzeVqZ5hC%2fdBGw&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20180307%2f9885883_112923704000_2.jpg&ehk=WVCfcGRxiJIchaHW9v4va%2bNOoA4yK5oQ5yPJN3qRQGs%3d&risl=&pid=ImgRaw&r=0',
					detair: '爆爆珠奶茶大杯',
					price: '10'
				},
				{
					id: '4',
					isAdded: false,
					sort: '鲜牛乳',
					name: '茉莉牛乳奶茶',
					img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.PrF564b-Bdst662YDY-KIwHaE8?rs=1&pid=ImgDetMain',
					detair: '大杯',
					price: '12'
				},
				{
					id: '5',
					isAdded: false,
					sort: '鲜牛乳',
					name: '草莓牛乳奶茶',
					img: 'https://pic.nximg.cn/file/20230216/30445860_164824259104_2.jpg',
					detair: '大杯',
					price: '13'
				},
				{
					id: '6',
					isAdded: false,
					sort: '鲜牛乳',
					name: '抹茶脏脏鲜牛乳',
					img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Iwx8l64t9e_GqR396T4X2gHaLH?rs=1&pid=ImgDetMain',
					detair: '大杯',
					price: '15'
				},
				{
					id: '7',
					isAdded: false,
					sort: '果茶',
					name: '柚子水果茶',
					img: 'https://cdn.wantuju.com/pngsucai/imgRegular/20210802/5eb53583-b1b1-44a4-a1ab-f86318152dd6%20_123896_wantuju.jpg',
					detair: '大杯',
					price: '12'
				},
				{
					id: '8',
					isAdded: false,
					sort: '果茶',
					name: '柠檬百香果果茶',
					img: 'https://img.zcool.cn/community/01986c5be53716a801209252cedc4f.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100',
					detair: '大杯',
					price: '13'
				},
				{
					id: '9',
					isAdded: false,
					sort: '果茶',
					name: '猕猴桃果茶',
					img: 'https://imgpp.ztupic.com/bup/so/20210513/a5bac2b36f73c8bc843406d85ef1f5a8-1.jpg?x-oss-process=image/crop,w_1024,h_1542/resize,h_812/quality,q_85/sharpen,100',
					detair: '大杯',
					price: '15'
				},
				{
					id: '10',
					isAdded: false,
					sort: '柠檬茶',
					name: '百香果柠檬茶',
					img: 'https://imgpp.ztupic.com/bup/20210104/41ad778b34e59d7b02d969cd9712ce83-1.jpg?x-oss-process=image/crop,w_1024,h_1542/resize,h_812/quality,q_85/sharpen,100',
					detair: '大杯',
					price: '12'
				},
				{
					id: '11',
					isAdded: false,
					sort: '柠檬茶',
					name: '柠檬红茶',
					img: 'https://file.moyublog.com/d/file/2023-04-07/babea3337d4f63b618908b9d10c53817.jpg',
					detair: '大杯',
					price: '13'
				},
				{
					id: '12',
					isAdded: false,
					sort: '柠檬茶',
					name: '冰青柠檬茶',
					img: 'https://img.ixintu.com/upload/jpg/20210524/d7b617e3a1ffb196769ed5f0997f555f_94812_628_1000.jpg!con',
					detair: '大杯',
					price: '7'
				},
				{
					id: '13',
					isAdded: false,
					sort: '小料',
					name: '珍珠',
					img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.3abziL3d99V3hpOitozZvwHaE8?rs=1&pid=ImgDetMain',
					detair: '',
					price: '2'
				},
				{
					id: '14',
					isAdded: false,
					sort: '小料',
					name: '红豆',
					img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.4Ds9pJVk_aT6ceGRg_WmIAHaE8?rs=1&pid=ImgDetMain',
					detair: '',
					price: '2'
				},
				{
					id: '15',
					isAdded: false,
					sort: '小料',
					name: '布丁',
					img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.qbL4K6RrLBVv66OT5RsLJQHaE7?rs=1&pid=ImgDetMain',
					detair: '',
					price: '2'
				},
			]
		}
	},
	//使用Vuex状态管理库, 用于管理一个应用中的用户状态、登录状态以及购物车功能。
	mutations: {
		//用于设置用户的状态。它接受两个参数：state（Vuex的状态树）和user（用户信息）。执行时，它会将state.user更新为传入的user。
		SET_USER(state, user) {
			state.user = user
		},
		// 用于设置用户的登录状态。它接受两个参数：state和status（登录状态）。执行时，它会将state.isLogin更新为传入的status。
		SET_lOGIN(state, status) {
			state.isLogin = status
		},
		// 用于向购物车中添加商品。它接受两个参数：state和goods（要添加的商品信息）。执行时，它会将商品的isAdded属性设置为true，然后将该商品添加到state.cart.goods数组中。
		ADD_GOODS(state, goods) {
			goods.isAdded = true
			state.cart.goods.push(goods)
		},

		REMOVE_GOODS(state, goods) {
			// 从购物车中找到要删除的商品，及它的索引
			// ['a','b','c']
			// 执行时，它会首先将商品的isAdded属性设置为false，然后查找该商品在state.cart.goods数组中的索引，如果找到（索引大于-1），则使用splice方法从数组中移除该商品。
			goods.isAdded = false
			const goodsIndex = state.cart.goods.indexOf(goods)
			if (goodsIndex > -1) {
				state.cart.goods.splice(goodsIndex, 1)
			}
		}
	},
	getters: {
		user:state=>{
		return state.user
	},
	// 返回当前的登录状态
	isLogin: state => {
		return state.isLogin
	},
	// 返回整个购物车对象。
	cart: state => {
		return state.cart
	},
	// 返回购物车中的商品列表。
	goodsOfCart: states => {
		return states.cart.goods
	},
	//返回模拟数据中的商品列表。
	goods: state => {
		return state.mockData.goods
	}
},
actions: {
	// 用于处理添加商品到购物车的逻辑。它接受一个goods对象作为参数，首先使用uni.showToast显示一个提示信息，然后调用ADD_GOODS mutation来更新状态。
	addGoods({
		state,
		commit,
		getters
	}, goods) {
		uni.showToast({
			title: "商品已加入购物车",
			icon: "none"
		})
		commit('ADD_GOODS', goods)
	},
	//然后调用REMOVE_GOODS mutation来更新状态。
	removeGoods({
		state,
		commit,
		getters
	}, goods) {
		uni.showToast({
			title: "商品已移除购物车",
			icon: "none"
		})
		commit('REMOVE_GOODS', goods)
		// servier
	}
}
})
export default store